import { useEffect, useState, useMemo, useCallback } from 'react';
import { Row, Col, Badge, Empty } from 'antd';
import classNames from 'classnames';
import styles from './index.less';

export default () => {
  const [weekRankList, setWeekRankList] = useState([]);
  const [termRankList, setTermRankList] = useState([]);
  const badgeRule = useMemo(
    () => ({
      data: {
        result: [
          {
            id: 21,
            xxNo: '150622zgeqxjwdsxx',
            name: '星星',
            pic: 'https://image.iwisesoft.com/share/badgeLV1.png',
            upgradeCount: 2,
            grade: 1,
            upgradeBaseCount: 2,
            badgeCount: 0,
          },
          {
            id: 22,
            xxNo: '150622zgeqxjwdsxx',
            name: '月亮',
            pic: 'https://image.iwisesoft.com/share/badgeLV2.png',
            upgradeCount: 3,
            grade: 2,
            upgradeBaseCount: 6,
            badgeCount: 0,
          },
          {
            id: 23,
            xxNo: '150622zgeqxjwdsxx',
            name: '太阳',
            pic: 'https://image.iwisesoft.com/share/badgeLV3.png',
            upgradeCount: 2,
            grade: 3,
            upgradeBaseCount: 12,
            badgeCount: 0,
          },
          {
            id: 24,
            xxNo: '150622zgeqxjwdsxx',
            name: '钻石',
            pic: 'https://image.iwisesoft.com/share/badgeLV4.png',
            upgradeCount: 2,
            grade: 4,
            upgradeBaseCount: 24,
            badgeCount: 0,
          },
        ],
      },
    }),
    [],
  );

  const weekRank = useMemo(
    () => ({
      data: {
        result: [
          {
            xsName: '练筠俊',
            score: 15,
          },
          {
            xsName: '司瑗巧',
            score: 14,
          },
          {
            xsName: '薛广',
            score: 13,
          },
          {
            xsName: '沙毓',
            score: 12,
          },
          {
            xsName: '廋珠',
            score: 11,
          },
          {
            xsName: '练筠俊2',
            score: 10,
          },
          {
            xsName: '司瑗巧2',
            score: 6,
          },
          {
            xsName: '薛广2',
            score: 5,
          },
          {
            xsName: '沙毓2',
            score: 4,
          },
          {
            xsName: '廋珠2',
            score: 3,
          },
        ],
      },
    }),
    [],
  );

  const termRank = useMemo(
    () => ({
      data: {
        result: [
          {
            xsName: '练筠俊',
            score: 15,
          },
          {
            xsName: '司瑗巧',
            score: 14,
          },
          {
            xsName: '薛广',
            score: 13,
          },
          {
            xsName: '沙毓',
            score: 12,
          },
          {
            xsName: '廋珠',
            score: 11,
          },
          {
            xsName: '练筠俊2',
            score: 10,
          },
          {
            xsName: '司瑗巧2',
            score: 6,
          },
          {
            xsName: '薛广2',
            score: 5,
          },
          {
            xsName: '沙毓2',
            score: 4,
          },
          {
            xsName: '廋珠2',
            score: 3,
          },
        ],
      },
    }),
    [],
  );

  const getBadgeListByScore = useCallback((score, badgeRuleList) => {
    if (badgeRuleList && badgeRuleList.length) {
      const scoreEle = (
        <span key="score" style={{ marginLeft: 8, fontWeight: 'bold' }}>
          [{score}]
        </span>
      );
      const badgeRuleListShadow = JSON.parse(JSON.stringify(badgeRuleList)).reverse();
      // 计算每一级的徽标数量
      for (let i = 0; i < badgeRuleListShadow.length; i += 1) {
        const rule = badgeRuleListShadow[i];
        rule.badgeCount = parseInt(score / rule.upgradeBaseCount, 10);
        // eslint-disable-next-line no-param-reassign
        score %= rule.upgradeBaseCount;
      }

      const badges = badgeRuleListShadow
        .filter((x) => x.badgeCount > 0)
        .map((rule) => (
          <Badge key={rule.id} size="small" count={rule.badgeCount}>
            <img src={rule.pic} />
          </Badge>
        ));
      badges.push(scoreEle);
      return <div className={styles.badgeWrapper}> {badges}</div>;
    }
    return null;
  }, []);

  useEffect(() => {
    if (!badgeRule.data || !weekRank.data) {
      return;
    }
    if (badgeRule.data.result && weekRank.data.result) {
      weekRank.data.result.forEach((student) => {
        // eslint-disable-next-line no-param-reassign
        student.badgeList = getBadgeListByScore(student.score, badgeRule.data.result);
      });
      setWeekRankList([...weekRank.data.result]);
    }
  }, [badgeRule, weekRank, getBadgeListByScore]);

  useEffect(() => {
    if (!badgeRule.data || !termRank.data) {
      return;
    }
    if (badgeRule.data.result && termRank.data.result) {
      termRank.data.result.forEach((student) => {
        // eslint-disable-next-line no-param-reassign
        student.badgeList = getBadgeListByScore(student.score, badgeRule.data.result);
      });
      setTermRankList([...termRank.data.result]);
    }
  }, [badgeRule, termRank, getBadgeListByScore]);

  return (
    <div className={classNames(styles.wrapper)} style={{ display: 'flex' }}>
      <div className={classNames('bg', 'bg-1', styles['bg-1'])} />
      <div className="bg bg-2" />
      <Row style={{ flex: 1, padding: '0 14px' }}>
        <Col span={12}>
          <Row className={styles['core-wrapper']} style={{ flexFlow: 'column', flex: 1 }}>
            <Col flex="52px">
              <Row className={classNames('linear-title', styles.title)} justify="center">
                <span>学生素养周榜</span>
              </Row>
            </Col>
            <Col flex="auto" className="data-table-body">
              {weekRankList.length ? (
                weekRankList.map((x) => (
                  <Row key={x.xsName} className="data-table-row" wrap={false}>
                    <Col flex="80px">{x.xsName}</Col>
                    <Col flex="auto">{x.badgeList}</Col>
                  </Row>
                ))
              ) : (
                <Empty />
              )}
            </Col>
          </Row>
        </Col>
        <Col span={12}>
          <Row className={styles['core-wrapper']} style={{ flexFlow: 'column', flex: 1 }}>
            <Col flex="52px">
              <Row className={classNames('linear-title', styles.title)} justify="center">
                <span>学生素养学期榜</span>
              </Row>
            </Col>
            <Col flex="auto" className="data-table-body">
              {termRankList.length ? (
                termRankList.map((x) => (
                  <Row key={x.xsName} className="data-table-row" wrap={false}>
                    <Col flex="80px">{x.xsName}</Col>
                    <Col flex="auto">{x.badgeList}</Col>
                  </Row>
                ))
              ) : (
                <Empty />
              )}
            </Col>
          </Row>
        </Col>
      </Row>
    </div>
  );
};
